<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <title>事件基本使用</title>
</head>

<body>
  <!-- 
    事件的基本使用:
      1.使用v-on:click="xxx"或者@click="xxx"绑定事件,其中xxx事件名
      2.事件的回调需要配置在methods对象中,最终会在vm上
      3.methods中配置函数,不要用箭头函数,否则this就不是vm
      4.methods中配置函数,都是Vue所管理的函数,this的指向是vm或者组件实例对象
      5.@clock="demo"和@click="$event"效果一致,但是后者可以传参
   -->
  <!-- 创建一个容器 -->
  <div id="root">
    <h2>欢迎来{{city}}打工</h2>
    <button v-on:click="showInfo">点我提示</button>
    <!-- 简写 v-on:=@ -->
    <button @click="showInfo1">点我提示!</button>
    <button @click="showInfo2(666)">点我提示!!</button>
    <button @click="showInfo3(666,$event)">点我提示!!!</button>
  </div>
  <script>
    Vue.config.productionTip = false
    // 创建一个实例
    new Vue({
      el: '#root',
      data(){
        return{
          city: '深圳'
        }
      },
      methods: {
        showInfo(){
          alert('你好同学')
        },
        showInfo1() {
          alert('同学你好!')
        },
        showInfo2(num){
          console.log(num)
          alert('同学你好!!!'+num)
        },
        showInfo3(num,event){
          console.log(num,event)
          alert('同学你好!!!'+num)
        }
      }
    })
  </script>
</body>

</html>